<template>
  <div class="compact-home">
    <!-- 顶部区域：多列布局 -->
    <div class="dashboard-area">
      <!-- 左侧轮播图区域 -->
      <div class="dashboard-main">
        <div class="banner-container">
          <el-carousel height="500px" :autoplay="true" :interval="5000" indicator-position="none">
            <el-carousel-item v-for="item in bannerList" :key="item.id" style="border-radius: 16px; overflow: hidden;">
              <div class="immersive-banner-item" style="border-radius: 16px; overflow: hidden;">
                <!-- 背景图片 -->
                <el-image :src="item.image" fit="cover" class="immersive-banner-image" />

                <div class="immersive-overlay">
                  <div class="immersive-content">
                    <!-- 通用标题 -->
                    <h2 class="immersive-title">{{ item.title }}</h2>
                    <p class="immersive-subtitle">{{ item.subtitle }}</p>

                    <!-- 商品类型的额外信息 -->
                    <div v-if="item.type === 'product'" class="banner-detail-info">
                      <div class="product-card-mini">
                        <el-image :src="item.product.image" fit="cover" class="product-image-mini" />
                        <div class="product-info-mini">
                          <h3>{{ item.product.name }}</h3>
                          <p class="price">¥{{ item.product.price }}</p>
                          <p class="school">{{ item.product.school }}</p>
                        </div>
                      </div>
                    </div>

                    <!-- 学校类型的额外信息 -->
                    <div v-if="item.type === 'school'" class="banner-detail-info">
                      <div class="school-card-mini">
                        <el-avatar :size="120" :src="item.school.logo" fit="cover" class="school-logo-mini" />
                        <div class="school-info-mini">
                          <h3>{{ item.school.name }}</h3>
                          <p>{{ item.school.productCount }}件商品</p>
                          <el-progress :percentage="item.school.percentage" :color="item.school.color"
                            style="width: 200px;" />
                        </div>
                      </div>
                    </div>

                    <!-- 用户类型的额外信息 -->
                    <div v-if="item.type === 'user'" class="banner-detail-info">
                      <div class="user-card-mini">
                        <el-avatar :size="80" :src="item.user.avatar" fit="cover" class="user-avatar-mini" />
                        <div class="user-info-mini">
                          <h3>{{ item.user.name }}</h3>
                          <p>{{ item.user.school }}</p>
                          <div class="credibility">
                            <span>信誉度: {{ item.user.credibility }}%</span>
                            <el-progress :percentage="item.user.credibility" :color="customColorMethod"
                              style="width: 200px;" />
                          </div>
                          <p class="product-count">已发布 {{ item.user.productCount }} 件商品</p>
                        </div>
                      </div>
                    </div>

                    <el-button type="primary" size="large" class="immersive-button" @click="navigateToBanner(item)">
                      {{ item.type === 'product' ? '查看商品' : item.type === 'school' ? '浏览学校' : '查看卖家' }}
                    </el-button>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      
      <!-- 右侧快捷入口和公告区 -->
      <div class="dashboard-sidebar">
        <!-- 快捷导航区 - 网格布局 -->
        <div class="quick-nav-grid">
          <div class="nav-item" @click="goToMySchool">
            <el-icon>
              <School />
            </el-icon>
            <span>我的学校</span>
          </div>
          <div class="nav-item" @click="goToMyProducts">
            <el-icon>
              <Goods />
            </el-icon>
            <span>我的商品</span>
          </div>
          <div class="nav-item" @click="goToCategory">
            <el-icon>
              <Menu />
            </el-icon>
            <span>分类浏览</span>
          </div>
          <div class="nav-item" @click="goToSchool">
            <el-icon>
              <School />
            </el-icon>
            <span>热门学校</span>
          </div>
        </div>
        
        <!-- 公告栏 -->
        <CompactCard title="平台公告" icon="Bell">
          <div class="announcements-container">
            <div class="announcements-list">
              <div v-for="(item, index) in announcements" :key="index" class="announcement-item">
                <span class="dot"></span>
                <span>{{ item.content }}</span>
              </div>
            </div>
          </div>
        </CompactCard>
      </div>
    </div>
    
    <!-- 核心内容区 - 4列网格布局 -->
    <GridLayout :columns="4">
      <!-- 热门商品卡片 -->
      <div class="span-2 row-span-2">
        <CompactCard title="热门商品" icon="Star">
          <template #extra>
            <button class="ios19-more-btn" @click="viewMoreProducts">
              查看更多
              <span class="ios19-arrow">→</span>
            </button>
          </template>
          
          <!-- 热门商品容器 -->
          <div class="ios19-products-container">
            <div class="ios19-products-scroll" @scroll="handleProductsScroll">
              <div class="ios19-products-grid">
                <!-- 商品卡片 -->
                <div v-for="(product, index) in displayedProducts" :key="product.id + index"
                  class="ios19-product-card-square" :class="{ 'appear-animation': true }"
                  :style="{ '--animation-delay': `${Math.min(index * 0.05, 1)}s` }" @click="viewProductDetail(product)"
                  @mouseover="handleCardHover(product.id, true)" @mouseleave="handleCardHover(product.id, false)">
                  <div class="ios19-card-inner-square">
                    <!-- 商品图片容器 -->
                    <div class="ios19-image-container-square">
                      <el-image :src="product.image" fit="cover" class="ios19-product-image-square" loading="lazy" />
                      <div class="ios19-badge" v-if="product.badge">
                        {{ product.badge }}
                      </div>
                    </div>

                    <!-- 玻璃态内容区 -->
                    <div class="ios19-content-square">
                      <div class="ios19-content-left">
                        <h4 class="ios19-title">{{ product.name }}</h4>
                        <div class="ios19-info">
                          <p class="ios19-school">{{ product.school }}</p>
                        </div>
                      </div>
                      <div class="ios19-content-right">
                        <p class="ios19-price">¥{{ product.price }}</p>
                        <!-- 操作区 -->
                        <div class="ios19-buttons">
                          <button class="ios19-like-btn" @click.stop="handleLike(product)">
                            <i class="ios19-icon-heart"></i>
                          </button>
                          <button class="ios19-cart-btn" @click.stop="handleAddToCart(product)">
                            <i class="ios19-icon-cart"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 加载更多指示器 - iOS风格 -->
            <div v-if="isLoading" class="ios19-loading">
              <div class="ios19-spinner"></div>
              <span>加载中</span>
            </div>

            <!-- 全部加载完毕提示 - iOS风格 -->
            <div v-if="loadedAll" class="ios19-end-message">
              <span>已经到底啦</span>
            </div>
          </div>
        </CompactCard>
      </div>
      
      <!-- 地图卡片 -->
      <div class="span-2">
        <CompactCard title="附近商品" icon="Location">
          <template #extra>
            <el-button link @click="viewMapFullScreen">全屏</el-button>
          </template>
          
          <div class="map-content-container">
            <div class="map-main-container">
              <div id="container" class="map-content" ref="mapContainer"></div>
            </div>
            <div class="nearby-listing-container">
              <div class="nearby-header">
                <h4>附近商品</h4>
              </div>
              <div class="nearby-scrollbar">
                <div class="nearby-items-grid">
                  <div v-for="(product, index) in nearbyProducts.slice(0, 5)" :key="index" class="nearby-product-item"
                    @click="viewProductDetail(product)">
                    <div class="nearby-product-image-container">
                      <img :src="product.image" alt="Product Image" class="nearby-product-img">
                    </div>
                    <div class="nearby-product-content">
                      <div class="nearby-product-title">{{ product.name }}</div>
                      <div class="nearby-product-seller">
                        <el-avatar :size="20" :src="product.seller.avatar"></el-avatar>
                        <span>{{ product.seller.name }}</span>
                      </div>
                      <div class="nearby-product-price">¥{{ product.price }}</div>
                    </div>
                    <div class="nearby-product-distance">{{ product.distance }} km</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CompactCard>
      </div>
      
      <!-- 热门学校卡片 -->
      <div class="span-2">
        <CompactCard title="热门学校" icon="School">
          <template #extra>
            <el-button link @click="viewMoreSchools">更多</el-button>
          </template>
          
          <div class="schools-horizontal-grid">
            <div v-for="school in hotSchools.slice(0, 3)" :key="school.id" class="school-gallery-item"
              @click="viewSchoolDetail(school)">
              <div class="school-gallery-image">
                <el-avatar 
                  :size="80" 
                  :src="processLogoUrl(school.logo)" 
                  fit="cover" 
                  class="school-logo"
                >
                  <el-icon><School /></el-icon>
                </el-avatar>
              </div>
              <div class="school-gallery-content">
                <h4 class="school-gallery-name">{{ school.name }}</h4>
                <p class="school-gallery-count">{{ school.productCount }}件商品</p>
                <el-progress :percentage="getSchoolPercentage(school)" :stroke-width="10"
                  :color="getSchoolColor(school)" :show-text="false" />
              </div>
            </div>
          </div>
        </CompactCard>
      </div>
      
      <!-- 最新上架卡片 -->
      <div class="span-2">
        <CompactCard title="最新上架" icon="Clock">
          <template #extra>
            <el-button link @click="viewNewProducts">更多</el-button>
          </template>
          
          <div class="products-horizontal-list">
            <CompactProduct v-for="product in newProducts.slice(0, 3)" :key="product.id" :product="product" horizontal
              size="small" @click="viewProductDetail(product)" />
          </div>
        </CompactCard>
      </div>
      
      <!-- 用户求购卡片 -->
      <div class="span-2">
        <CompactCard title="用户求购" icon="ShoppingBag">
          <template #extra>
            <el-button link @click="viewAllRequests">更多</el-button>
          </template>
          
          <div class="requests-compact-list">
            <div v-for="(request, index) in requestsData.slice(0, 3)" :key="index" class="request-item"
              @click="viewRequestDetail(request)">
              <div class="request-header">
                <el-avatar :size="28" :src="request.user.avatar"></el-avatar>
                <span class="request-username">{{ request.user.name }}</span>
                <span class="request-time">{{ request.time }}</span>
              </div>
              <div class="request-content">
                {{ request.content }}
              </div>
              <div class="request-footer">
                <span class="request-price">预算: ¥{{ request.price }}</span>
                <el-button size="small" type="primary" plain @click.stop="contactRequestUser(request)">联系</el-button>
              </div>
            </div>
          </div>
        </CompactCard>
      </div>
    </GridLayout>
    
    <!-- 底部分类区域 - 单行多列 -->
    <div class="categories-row">
      <div class="category-title-area">
        <h3 class="section-title">商品分类</h3>
        <el-button link @click="viewAllCategories">查看全部</el-button>
      </div>
      
      <div class="categories-grid">
        <div v-for="category in categories" :key="category.id" class="category-btn" @click="viewCategory(category)">
          <div class="category-icon">
            <el-icon>
              <component :is="category.icon" />
            </el-icon>
          </div>
          <div class="category-info">
            <div class="category-name">{{ category.name }}</div>
            <div class="category-count">{{ category.count }}件</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 定义组件名称，与路由配置中的name属性匹配
defineOptions({
  name: 'ModernHome'
})

import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  Search, School, Goods, Menu, Bell, Location, Star, 
  Clock, ShoppingBag, ShoppingCart, Reading, Suitcase
} from '@element-plus/icons-vue';
import GridLayout from '@/components/home/GridLayout.vue';
import CompactCard from '@/components/home/CompactCard.vue';
import CompactProduct from '@/components/home/CompactProduct.vue';
import CompactSchool from '@/components/home/CompactSchool.vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/stores/user';

const router = useRouter();
const userStore = useUserStore();
// AMap在window全局对象上，可以通过window.AMap访问

const mapContainer = ref(null);
const mapInstance = ref(null); // 添加地图实例引用变量
const searchKeyword = ref('');

// 轮播图数据
const bannerList = ref([
  {
    id: 1,
    image: '/src/assets/placeholder.png',
    title: '校园二手交易平台',
    subtitle: '高校闲置物品交易首选',
    type: 'product',
    product: {
      id: 1,
      name: 'iPhone 13',
      price: 4999,
      image: '/src/assets/placeholder.png',
      school: '北京大学'
    }
  },
  {
    id: 2,
    image: '/src/assets/placeholder.png',
    title: '发现附近的好物',
    subtitle: '同校交易更方便',
    type: 'school',
    school: {
      id: 1,
      name: '北京大学',
      logo: '/src/assets/avatar.png',
      productCount: 1200,
      percentage: 85,
      color: '#409EFF'
    }
  },
  {
    id: 3,
    image: '/src/assets/placeholder.png',
    title: '信誉卖家推荐',
    subtitle: '安全交易有保障',
    type: 'user',
    user: {
      id: 1,
      name: '张三',
      avatar: '/src/assets/avatar.png',
      school: '北京大学',
      credibility: 96,
      productCount: 45
    }
  }
]);

// 公告数据
const announcements = ref([
  { id: 1, content: '欢迎使用校园二手交易平台，请文明交易' },
  { id: 2, content: '新增闲置服装分类，快来淘好物吧' },
  { id: 3, content: '平台将于本周日进行系统升级，请留意' }
]);

// 热门商品数据
const hotProducts = ref([
  { 
    id: 1, 
    name: 'iPhone 13', 
    price: 4999, 
    image: '/src/assets/placeholder.png',
    school: '北京大学',
    badge: '热门'
  },
  { 
    id: 2, 
    name: 'MacBook Pro', 
    price: 9999, 
    image: '/src/assets/placeholder.png',
    school: '清华大学',
    badge: '推荐'
  },
  { 
    id: 3, 
    name: '自行车', 
    price: 299, 
    image: '/src/assets/placeholder.png',
    school: '北京大学',
    badge: '9成新'
  },
  { 
    id: 4, 
    name: '电脑桌', 
    price: 199, 
    image: '/src/assets/placeholder.png',
    school: '中国人民大学',
    badge: '包邮'
  },
  { 
    id: 5, 
    name: '球鞋', 
    price: 399, 
    image: '/src/assets/placeholder.png',
    school: '北京师范大学'
  },
  { 
    id: 6, 
    name: '书架', 
    price: 159, 
    image: '/src/assets/placeholder.png',
    school: '北京航空航天大学'
  }
]);

// 热门学校数据
const allHotSchools = ref([
  { id: 1, name: '北京大学', logo: '/src/assets/avatar.png', productCount: 1200 },
  { id: 2, name: '清华大学', logo: '/src/assets/avatar.png', productCount: 980 },
  { id: 3, name: '中国人民大学', logo: '/src/assets/avatar.png', productCount: 760 },
  { id: 4, name: '北京师范大学', logo: '/src/assets/avatar.png', productCount: 560 },
  { id: 5, name: '北京航空航天大学', logo: '/src/assets/avatar.png', productCount: 498 },
  { id: 6, name: '复旦大学', logo: '/src/assets/avatar.png', productCount: 886 },
  { id: 7, name: '上海交通大学', logo: '/src/assets/avatar.png', productCount: 842 },
  { id: 8, name: '南京大学', logo: '/src/assets/avatar.png', productCount: 715 }
]);

// 附近商品数据
const nearbyProducts = ref([
  { 
    id: 1, 
    name: '自行车', 
    price: 300, 
    image: '/src/assets/placeholder.png',
    distance: 0.5,
    seller: { name: '张三', avatar: '/src/assets/avatar.png' }
  },
  { 
    id: 2, 
    name: '书架', 
    price: 150, 
    image: '/src/assets/placeholder.png',
    distance: 0.8,
    seller: { name: '李四', avatar: '/src/assets/avatar.png' }
  },
  { 
    id: 3, 
    name: '篮球', 
    price: 80, 
    image: '/src/assets/placeholder.png',
    distance: 1.2,
    seller: { name: '王五', avatar: '/src/assets/avatar.png' }
  },
  { 
    id: 4, 
    name: '台灯', 
    price: 60, 
    image: '/src/assets/placeholder.png',
    distance: 1.5,
    seller: { name: '赵六', avatar: '/src/assets/avatar.png' }
  }
]);

// 最新上架商品数据
const allNewProducts = ref([
  { 
    id: 101, 
    name: '无线耳机', 
    price: 129, 
    image: '/src/assets/placeholder.png',
    school: '北京大学'
  },
  { 
    id: 102, 
    name: '电风扇', 
    price: 89, 
    image: '/src/assets/placeholder.png',
    school: '清华大学'
  },
  { 
    id: 103, 
    name: '床上书桌', 
    price: 75, 
    image: '/src/assets/placeholder.png',
    school: '北京师范大学'
  },
  {
    id: 104,
    name: '机械键盘',
    price: 199,
    image: '/src/assets/placeholder.png',
    school: '复旦大学'
  },
  {
    id: 105,
    name: '显示器支架',
    price: 65,
    image: '/src/assets/placeholder.png',
    school: '南京大学'
  },
  {
    id: 106,
    name: '篮球',
    price: 59,
    image: '/src/assets/placeholder.png',
    school: '中国人民大学'
  }
]);

// 用户求购数据
const allRequestsData = ref([
  {
    id: 1,
    user: { name: '小明', avatar: '/src/assets/avatar.png' },
    content: '求购二手自行车，男式，变速的优先考虑',
    price: 200,
    time: '3小时前'
  },
  {
    id: 2,
    user: { name: '小红', avatar: '/src/assets/avatar.png' },
    content: '想买一个二手的iPad Air，128G，有的私聊',
    price: 2000,
    time: '5小时前'
  },
  {
    id: 3,
    user: { name: '小刚', avatar: '/src/assets/avatar.png' },
    content: '求购考研英语资料，要求比较新的版本',
    price: 50,
    time: '1天前'
  },
  {
    id: 4,
    user: { name: '小李', avatar: '/src/assets/avatar.png' },
    content: '求购一台二手笔记本电脑，预算3000以内',
    price: 3000,
    time: '2天前'
  },
  {
    id: 5,
    user: { name: '小张', avatar: '/src/assets/avatar.png' },
    content: '求购一本微积分教材，需要带答案的',
    price: 30,
    time: '4小时前'
  },
  {
    id: 6,
    user: { name: '小王', avatar: '/src/assets/avatar.png' },
    content: '求购一个二手显示器，24寸以上，预算500',
    price: 500,
    time: '6小时前'
  }
]);

// 分类数据
const categories = ref([
  { id: 1, name: '数码产品', icon: 'Iphone', count: 568 },
  { id: 2, name: '图书教材', icon: 'Reading', count: 732 },
  { id: 3, name: '生活用品', icon: 'Suitcase', count: 421 },
  { id: 4, name: '服装鞋包', icon: 'ShoppingBag', count: 389 },
  { id: 5, name: '体育用品', icon: 'Football', count: 245 }
]);

// 热门商品交互逻辑
const isLoading = ref(false);
const loadedAll = ref(false);

// 额外商品数据用于无限滚动加载
const extraProducts = ref([
  {
    id: 7,
    name: '蓝牙耳机',
    price: 169,
    image: '/src/assets/placeholder.png',
    school: '首都师范大学'
  },
  {
    id: 8,
    name: '平板电脑',
    price: 2999,
    image: '/src/assets/placeholder.png',
    school: '华北电力大学',
    badge: '特价'
  },
  {
    id: 9,
    name: '机械键盘',
    price: 349,
    image: '/src/assets/placeholder.png',
    school: '北京邮电大学'
  }
]);

// 实际显示的商品
const displayedProducts = ref(hotProducts.value.slice(0, 6));

// 处理商品卡片的滚动
const handleProductsScroll = (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target;
  // 当滚动到底部附近时，触发加载更多
  if (scrollTop + clientHeight >= scrollHeight - 50 && !isLoading.value && !loadedAll.value) {
    loadMoreProducts();
  }
};

// 加载更多商品
const loadMoreProducts = () => {
  if (isLoading.value || loadedAll.value) return;

  isLoading.value = true;

  // 模拟加载更多商品
  setTimeout(() => {
    // 将额外商品添加到显示列表
    displayedProducts.value = [
      ...displayedProducts.value,
      ...extraProducts.value
    ];

    isLoading.value = false;

    // 所有额外商品已加载完成
    loadedAll.value = true;
  }, 1500);
};

// 处理卡片悬停效果
const handleCardHover = (productId, isHovered) => {
  // 这里可以添加悬停效果的逻辑
  console.log(`Product ${productId} hover state: ${isHovered}`);
};

// 处理喜欢按钮点击
const handleLike = (product) => {
  ElMessage.success(`已添加商品 ${product.name} 到收藏夹`);
};

// 处理添加到购物车
const handleAddToCart = (product) => {
  ElMessage.success(`已添加商品 ${product.name} 到购物车`);
};

// 地图初始化
const initMap = async () => {
  try {
    // 如果已有地图实例，先销毁
    if (mapInstance.value) {
      try {
        mapInstance.value.destroy();
      } catch (e) {
        console.error('地图销毁失败:', e);
      }
      mapInstance.value = null;
    }

    if (window.AMap && mapContainer.value) {
      // 创建地图实例
      const map = new window.AMap.Map(mapContainer.value, {
        zoom: 13,
        center: [116.397428, 39.90923],
        viewMode: '2D',
        mapStyle: 'amap://styles/whitesmoke',
        showIndoorMap: false, // 关闭室内地图
        showBuildingBlock: false, // 关闭建筑物块
        showLabel: false, // 关闭地图文字标签
        doubleClickZoom: false, // 关闭双击缩放
        dragEnable: true, // 开启拖拽
        resizeEnable: true, // 开启自适应
        zoomEnable: false, // 禁用缩放
        touchZoom: false, // 禁用触摸缩放
        keyboardEnable: false, // 禁用键盘控制
        scrollWheel: false, // 禁用滚轮缩放
        zoomButtons: false // 禁用缩放按钮
      });

      // 保存地图实例引用
      mapInstance.value = map;
      
      // 添加定位控件
      const geolocation = new window.AMap.Geolocation({
        enableHighAccuracy: true,
        timeout: 10000,
        buttonPosition: 'LB',
        buttonOffset: new window.AMap.Pixel(10, 20),
        zoomToAccuracy: true,
        showButton: true
      });
      map.addControl(geolocation);
      
      // 自动获取用户位置
      geolocation.getCurrentPosition((status, result) => {
        if (status === 'complete') {
          const position = result.position;
          map.setCenter(position);
          
          // 在用户位置添加标记
          new window.AMap.Marker({
            position,
            icon: new window.AMap.Icon({
              size: new window.AMap.Size(25, 34),
              imageSize: new window.AMap.Size(25, 34),
              image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
            }),
            offset: new window.AMap.Pixel(-12, -34),
            map: map
          });
          
          // 更新附近商品位置
          updateNearbyProducts(position);
        } else {
          // 定位失败时，仍初始化商品标记
          initProductMarkers();
        }
      });

      // 不再需要这里的标记创建代码，已移到initProductMarkers函数中

      // 不添加工具条控件以移除缩放按钮
      // 如果需要其他控件可以单独添加
    }
  } catch (error) {
    console.error('地图加载失败:', error);
  }
};

// 动态加载高德地图API
const loadMapScript = () => {
  return new Promise((resolve, reject) => {
    // 如果已经加载过，直接返回
    if (window.AMap) {
      resolve();
      return;
    }
    
    // 创建script元素
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = `https://webapi.amap.com/maps?v=2.0&key=b801e4ff3ab164d8ef56d85cd52ec0e0&plugin=AMap.Geolocation,AMap.Geocoder,AMap.ToolBar,AMap.Scale`;
    
    script.onerror = () => {
      reject(new Error('高德地图脚本加载失败'));
    };
    
    script.onload = () => {
      resolve();
    };
    
    document.head.appendChild(script);
  });
};

// 更新附近商品数据
const updateNearbyProducts = (position) => {
  // 这里应该调用API获取附近的真实商品数据
  // 暂时用模拟数据
  nearbyProducts.value.forEach((product) => {
    const randomDistance = (Math.random() * 0.8 + 0.2).toFixed(1);
    product.distance = parseFloat(randomDistance);
  });

  // 在更新距离后重新渲染标记
  if (mapInstance.value) {
    // 清除现有标记
    mapInstance.value.clearMap();

    // 重新添加用户位置标记
    if (position) {
      new window.AMap.Marker({
        position,
        icon: new window.AMap.Icon({
          size: new window.AMap.Size(25, 34),
          imageSize: new window.AMap.Size(25, 34),
          image: 'https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png'
        }),
        offset: new window.AMap.Pixel(-12, -34),
        map: mapInstance.value
      });
    }

    // 重新添加商品标记
    initProductMarkers();
  }
};

// 初始化商品标记函数 - 从原有的标记创建代码中提取
const initProductMarkers = () => {
  if (!mapInstance.value) return;

  nearbyProducts.value.forEach(product => {
    // 模拟随机位置
    const position = [
      116.397428 + (Math.random() - 0.5) * 0.05,
      39.90923 + (Math.random() - 0.5) * 0.05
    ];

    // 创建自定义标记内容
    const content = document.createElement('div');
    content.className = 'custom-marker-wrapper';

    // 设置标记HTML内容
    const markerHTML = `
      <div class="custom-marker">
        <div class="marker-hitbox"></div>
        <div class="marker-card">
          <div class="marker-avatar">
            <img src="${product.image}" alt="${product.name}">
          </div>
          <div class="marker-info">
            <div class="marker-name">${product.name}</div>
            <div class="marker-price">¥${product.price}</div>
            <div class="marker-distance">${product.distance} km</div>
          </div>
        </div>
        <div class="marker-arrow"></div>
      </div>
    `;

    content.innerHTML = markerHTML;

    // 获取标记元素的引用
    const markerElement = content.querySelector('.marker-card');
    const arrowElement = content.querySelector('.marker-arrow');
    const customMarker = content.querySelector('.custom-marker');

    // 创建标记
    const marker = new window.AMap.Marker({
      position,
      content: content,
      anchor: 'bottom-center',
      offset: new window.AMap.Pixel(0, 0),
      zIndex: 100,
      map: mapInstance.value,
      extData: product
    });

    // 悬停效果处理
    let isHovered = false;

    content.addEventListener('mouseenter', () => {
      if (isHovered) return;
      isHovered = true;

      try {
        markerElement.style.transform = 'scale(1.1) translateY(-8px)';
        markerElement.style.boxShadow = '0 16px 32px rgba(0,0,0,0.3), 0 0 12px rgba(0,0,0,0.15)';
        markerElement.style.border = '1px solid rgba(255,255,255,0.8)';
        arrowElement.style.borderTopColor = '#f7f7f7';

        // 置顶当前标记
        if (mapInstance.value) {
          mapInstance.value.remove(marker);
          mapInstance.value.add(marker);
        }
      } catch (e) {
        console.error('悬停效果应用失败:', e);
        isHovered = false;
      }
    });

    content.addEventListener('mouseleave', (e) => {
      if (e.relatedTarget && content.contains(e.relatedTarget)) {
        return;
      }

      if (!isHovered) return;
      isHovered = false;

      try {
        markerElement.style.transform = '';
        markerElement.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)';
        markerElement.style.border = 'none';
        arrowElement.style.borderTopColor = 'white';
      } catch (e) {
        console.error('恢复样式失败:', e);
      }
    });

    // 点击事件处理
    content.onclick = () => {
      viewProductDetail(product);
    };
  });
};

// 页面加载完成后初始化地图
onMounted(async () => {
  try {
    await loadMapScript();
    initMap();

    // 初始化随机数据
    refreshRandomData();

    // 设置5分钟(300000ms)刷新定时器
    refreshTimer = setInterval(refreshRandomData, 300000);
  } catch (error) {
    console.error('地图加载失败:', error);
  }
});

// 组件卸载时清除定时器
onUnmounted(() => {
  if (refreshTimer) {
    clearInterval(refreshTimer);
    refreshTimer = null;
  }
});

// 前往我的学校
const goToMySchool = () => {
    if (userStore.isLoggedIn) {
        if (userStore.userInfo.school) {
            // 获取学校ID并跳转到学校详情页
            const schoolId = userStore.userInfo.school;
            router.push(`/school/${schoolId}`);
        } else {
            // 如果用户已登录但没有设置学校，跳转到个人资料页
            router.push('/user/profile');
            ElMessage.warning('请先在个人资料中设置您的学校信息');
        }
    } else {
        // 如果用户未登录，则跳转到登录页面
        router.push('/login');
        ElMessage.warning('请先登录账号');
    }
}

const goToMyProducts = () => {
  router.push('/user/products');
};

const goToCategory = () => {
  router.push('/category');
};

const goToSchool = () => {
  router.push('/schools');
};

const handleSearch = () => {
  router.push({
    path: '/search',
    query: { q: searchKeyword.value }
  });
};

const viewProductDetail = (product) => {
  router.push(`/product/${product.id}`);
};

const viewSchoolDetail = (school) => {
  router.push(`/school/${school.id}`);
};

const viewMapFullScreen = () => {
  router.push('/map');
};

const viewMoreProducts = () => {
  router.push('/products');
};

const viewMoreSchools = () => {
  router.push('/schools');
};

const viewNewProducts = () => {
  router.push('/products/new');
};

const viewAllRequests = () => {
  router.push('/requests');
};

const viewRequestDetail = (request) => {
  router.push(`/request/${request.id}`);
};

const viewAllCategories = () => {
  router.push('/categories');
};

const viewCategory = (category) => {
  router.push(`/category/${category.id}`);
};

// 自定义进度条颜色
const customColorMethod = (percentage) => {
  if (percentage < 60) {
    return '#F56C6C';
  } else if (percentage < 80) {
    return '#E6A23C';
  } else {
    return '#67C23A';
  }
};

// 导航到banner对应的页面
const navigateToBanner = (item) => {
  if (item.type === 'product') {
    router.push(`/product/${item.product.id}`);
  } else if (item.type === 'school') {
    router.push(`/school/${item.school.id}`);
  } else if (item.type === 'user') {
    router.push(`/user/${item.user.id}`);
  }
};

// 随机刷新函数
const refreshRandomData = () => {
  // 随机选择3个热门学校
  hotSchools.value = getRandomItems(allHotSchools.value, 3);

  // 随机选择3个最新上架商品
  newProducts.value = getRandomItems(allNewProducts.value, 3);

  // 随机选择3个用户求购
  requestsData.value = getRandomItems(allRequestsData.value, 3);
};

// 获取随机项的辅助函数
const getRandomItems = (array, count) => {
  // 复制原数组，避免修改原始数据
  const shuffled = [...array];

  // 随机打乱数组
  for (let i = shuffled.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }

  // 返回前count个元素
  return shuffled.slice(0, count);
};

// 展示用的数据引用
const hotSchools = ref([]);
const newProducts = ref([]);
const requestsData = ref([]);

// 计算学校进度百分比的函数
const getSchoolPercentage = (school) => {
  // 假设1500是最大商品数量
  const maxCount = 1500;
  return Math.min(100, (school.productCount / maxCount) * 100);
};

// 根据百分比获取进度条颜色
const getSchoolColor = (school) => {
  const percentage = getSchoolPercentage(school);
  if (percentage < 30) {
    return '#909399'; // 灰色
  } else if (percentage < 70) {
    return '#e6a23c'; // 橙色
  } else {
    return '#67c23a'; // 绿色
  }
};

// 联系求购用户
const contactRequestUser = (request) => {
  // 检查用户是否已登录
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录后再联系求购者');
    router.push('/login?redirect=' + encodeURIComponent(router.currentRoute.fullPath));
    return;
  }
  
  // 跳转到聊天页面，带上相关参数
  router.push(`/chat?sellerId=${request.user.id}&requestId=${request.id}`);
};

// 添加在script setup部分其他变量定义之后
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 处理学校logo URL的函数
const processLogoUrl = (logo) => {
  if (!logo) {
    return defaultAvatar;
  }
  
  // 如果已经是完整URL则直接返回
  if (logo.startsWith('http://') || logo.startsWith('https://')) {
    return logo;
  }
  
  // 如果是相对路径，需要检查是否有前缀
  if (logo.startsWith('/')) {
    return import.meta.env.VITE_API_BASE_URL + logo;
  }
  
  // 文件名存在于images目录中，直接指向该目录
  return `/src/assets/images/${logo}`;
};
</script>

<style scoped>
.compact-home {
  padding: 15px;
}

/* 顶部仪表盘区域 */
.dashboard-area {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.dashboard-main {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.banner-container {
  height: 500px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
}

.el-carousel,
.el-carousel__container {
  height: 100% !important;
  width: 100% !important;
}

.el-carousel__item {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 20px;
}

.banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: white;
}

.banner-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-description {
  font-size: 16px;
  max-width: 600px;
  opacity: 0.9;
}

.dashboard-sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 移除快捷搜索栏 */
.quick-search {
  display: none;
}

/* 调整快捷导航区域 */
.quick-nav-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.nav-item {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #ebeef5;
  position: relative;
  overflow: hidden;
}

.nav-item:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.nav-item:active {
  transform: scale(0.96);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.nav-item .el-icon {
  font-size: 24px;
  color: #606266;
  margin-bottom: 8px;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.nav-item:hover .el-icon {
  color: #333;
  transform: scale(1.1);
}

.nav-item span {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

.nav-item:hover span {
  color: #333;
}

.announcements-container {
  background: white;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.announcements-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: visible;
}

.announcement-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  background: #f8f9fa;
  border-radius: 6px;
  transition: all 0.3s;
}

.announcement-item:hover {
  background: #f0f2f5;
  transform: translateX(5px);
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #409eff;
  border-radius: 50%;
  margin-top: 8px;
}

/* 移除自定义滚动条样式，因为不再需要 */
.announcements-list::-webkit-scrollbar,
.announcements-list::-webkit-scrollbar-track,
.announcements-list::-webkit-scrollbar-thumb,
.announcements-list::-webkit-scrollbar-thumb:hover {
  display: none;
}

/* 附近商品区域样式优化 */
.map-content-container {
  display: flex;
  gap: 15px;
  height: 450px;
  position: relative;
}

.map-main-container {
  flex: 3;
  /* 增加地图区域的比例 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f2f5;
}

.map-content {
  height: 100%;
  width: 100%;
}

.nearby-listing-container {
  width: 220px;
  /* 减少商品列表宽度 */
  min-width: 220px;
  /* 设置最小宽度 */
  flex-shrink: 0;
  /* 防止flex布局挤压 */
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  border: 1px solid #f0f2f5;
}

.nearby-header {
  padding: 10px 12px;
  /* 减少内边距 */
  border-bottom: 1px solid #f0f2f5;
  background: #fff;
}

.nearby-header h4 {
  margin: 0;
  font-size: 14px;
  /* 减小字体 */
  font-weight: 600;
  color: #333;
}

.nearby-scrollbar {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.nearby-items-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nearby-product-item {
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid #f0f2f5;
}

.nearby-product-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
}

.nearby-product-image-container {
  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.nearby-product-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nearby-product-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nearby-product-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-product-seller {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 3px 0;
}

.nearby-product-seller span {
  font-size: 11px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-product-price {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #ff6b6b;
}

.nearby-product-distance {
  margin: 0;
  font-size: 11px;
  color: #999;
  position: absolute;
  right: 8px;
  top: 8px;
}

@media (max-width: 992px) {
  .map-content-container {
    flex-direction: column;
    height: auto;
  }
  
  .map-main-container {
    height: 350px;
    flex: none;
    /* 移除flex设置 */
  }
  
  .nearby-listing-container {
    width: 100%;
    min-width: 100%;
    /* 设置为100% */
    height: 250px;
    /* 减少高度 */
  }

  /* 在小屏幕上恢复商品项的大小 */
  .nearby-product-item {
    gap: 10px;
    padding: 10px;
  }

  .nearby-product-image-container {
    width: 60px;
    height: 60px;
  }
}

/* 紧凑型网格样式 */
.products-dense-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 15px;
  padding: 5px;
}

/* 热门学校网格布局 - 更新为新的样式 */
.schools-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 5px;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 12px;
  height: 150px;
}

/* 学校卡片项样式 */
.school-gallery-item {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s;
  cursor: pointer;
  height: 100%;
}

.school-gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.school-gallery-image {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.school-logo {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border: 3px solid white;
  transition: transform 0.3s;
}

.school-gallery-item:hover .school-logo {
  transform: scale(1.1);
}

.school-gallery-content {
  width: 100%;
  text-align: center;
}

.school-gallery-name {
  margin: 0 0 5px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.school-gallery-count {
  margin: 5px 0;
  font-size: 12px;
  color: #666;
}

/* 确保进度条样式与学校界面一致 */
.school-gallery-content .el-progress {
  margin: 5px 0;
}

/* 最新上架商品列表 */
.products-horizontal-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 5px;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 12px;
  height: 100px;
}

.product-horizontal-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f0f2f5;
  cursor: pointer;
}

.product-horizontal-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 用户求购列表 */
.requests-compact-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 5px;
  background-color: rgba(245, 247, 250, 0.7);
  border-radius: 12px;
  height: 150px;
}

.request-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #f0f2f5;
  padding: 15px;
  cursor: pointer;
}

.request-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.request-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 0 5px;
}

.request-username {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.request-time {
  margin-left: auto;
  font-size: 12px;
  color: #999;
}

.request-content {
  font-size: 14px;
  color: #666;
  margin-bottom: 12px;
  padding: 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
  height: 42px;
}

.request-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5px;
}

.request-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff6b6b;
}

/* 底部分类区域 */
.categories-row {
  margin-top: 20px;
}

.category-title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.category-btn {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s;
}

.category-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.category-icon {
  font-size: 24px;
  color: #4266ff;
  margin-right: 12px;
}

.category-info {
  display: flex;
  flex-direction: column;
}

.category-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.category-count {
  font-size: 12px;
  color: #999;
}

/* 响应式调整 */
@media (max-width: 992px) {
  .dashboard-area {
    grid-template-columns: 1fr;
  }
  
  .products-dense-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
  
  .schools-horizontal-grid,
  .products-horizontal-list,
  .requests-compact-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .products-dense-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .schools-horizontal-grid,
  .products-horizontal-list,
  .requests-compact-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 自定义地图标记样式 */
:deep(.custom-marker-wrapper) {
  position: relative;
  width: auto;
  height: auto;
}

:deep(.custom-marker) {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:deep(.marker-hitbox) {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -10px;
}

:deep(.marker-card) {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 160px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    border 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

:deep(.marker-avatar) {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 10px;
}

:deep(.marker-avatar img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

:deep(.marker-info) {
  flex: 1;
}

:deep(.marker-name) {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:deep(.marker-price) {
  font-size: 16px;
  font-weight: bold;
  color: #FF3B30;
}

:deep(.marker-distance) {
  font-size: 12px;
  color: #999;
}

:deep(.marker-arrow) {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
  transition: border 0.3s ease;
}

/* 新增轮播图样式，采用经典版的设计 */
.immersive-banner-item {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.immersive-banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  display: block;
}

.immersive-banner-item:hover .immersive-banner-image {
  transform: scale(1.05);
}

.immersive-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1));
  color: white;
  display: flex;
  align-items: flex-end;
  padding: 40px;
}

.immersive-content {
  max-width: 600px;
  z-index: 2;
}

.immersive-title {
  font-size: 38px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.immersive-subtitle {
  font-size: 18px;
  opacity: 0.9;
  margin-bottom: 25px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.banner-detail-info {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-card-mini,
.school-card-mini,
.user-card-mini {
  display: flex;
  gap: 20px;
  align-items: center;
}

.product-image-mini {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.product-info-mini h3,
.school-info-mini h3,
.user-info-mini h3 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 600;
}

.product-info-mini .price {
  font-size: 22px;
  font-weight: 700;
  color: #FF6B6B;
  margin: 5px 0;
}

.product-info-mini .school,
.user-info-mini p {
  font-size: 16px;
  opacity: 0.9;
  margin: 5px 0;
}

.school-logo-mini,
.user-avatar-mini {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  border: 3px solid rgba(255, 255, 255, 0.2);
}

.school-info-mini p,
.user-info-mini .credibility {
  font-size: 16px;
  margin: 10px 0;
}

.user-info-mini .product-count {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 8px;
}

.immersive-button {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
}

.immersive-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
  background: linear-gradient(135deg, #FF8E53, #FF6B6B);
}

/* 调整元素在不同屏幕尺寸下的显示 */
@media (max-width: 992px) {
  .immersive-title {
    font-size: 30px;
  }

  .banner-detail-info {
    padding: 15px;
  }

  .product-image-mini {
    width: 80px;
    height: 80px;
  }

  .school-logo-mini {
    width: 80px;
    height: 80px;
  }

  .product-info-mini h3,
  .school-info-mini h3,
  .user-info-mini h3 {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .immersive-overlay {
    padding: 20px;
  }

  .immersive-title {
    font-size: 24px;
  }

  .immersive-subtitle {
    font-size: 16px;
  }

  .product-card-mini,
  .school-card-mini,
  .user-card-mini {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .immersive-button {
    font-size: 16px;
    padding: 10px 20px;
  }
}

/* iOS 19风格热门商品区域样式 */
.ios19-more-btn {
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: #007AFF;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ios19-more-btn:hover {
  background: rgba(0, 122, 255, 0.1);
}

.ios19-arrow {
  font-size: 16px;
  transition: transform 0.3s;
}

.ios19-more-btn:hover .ios19-arrow {
  transform: translateX(3px);
}

.ios19-products-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #f5f7fa;
  border-radius: 12px;
  backdrop-filter: blur(10px);
}

.ios19-products-scroll {
  width: 100%;
  height: 700px;
  max-height: 1000px;
  overflow-y: auto;
  padding: 12px 8px;
  background-color: rgba(245, 247, 250, 0.7);
}

.ios19-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
  padding: 5px;
  margin-bottom: 0;
  min-height: 200px;
}

.ios19-product-card-square {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, background 0.3s;
  cursor: pointer;
}

.ios19-product-card-square:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.95);
  z-index: 1;
}

.ios19-card-inner-square {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ios19-image-container-square {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
}

.ios19-product-image-square {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.ios19-product-card-square:hover .ios19-product-image-square {
  transform: scale(1.1);
}

.ios19-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 59, 48, 0.9);
  color: white;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ios19-content-square {
  padding: 12px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(230, 230, 235, 0.5);
}

.ios19-content-left {
  width: 70%;
}

.ios19-content-right {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ios19-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  color: #111;
}

.ios19-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.ios19-price {
  font-size: 15px;
  font-weight: 700;
  color: #ff4d4f;
  margin: 0;
  line-height: 1;
}

.ios19-school {
  font-size: 11px;
  color: #8E8E93;
  margin: 0;
  line-height: 1;
}

.ios19-buttons {
  display: flex;
  gap: 5px;
  margin-top: 5px;
}

.ios19-like-btn,
.ios19-cart-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
}

.ios19-like-btn:hover,
.ios19-cart-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

.ios19-icon-heart::before {
  content: '♥';
  color: #FF3B30;
}

.ios19-icon-cart::before {
  content: '🛒';
  font-size: 12px;
}

.ios19-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  gap: 8px;
  margin-top: 0;
}

.ios19-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 122, 255, 0.3);
  border-radius: 50%;
  border-top-color: #007AFF;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.ios19-end-message {
  text-align: center;
  padding: 8px 0;
  color: #8E8E93;
  font-size: 14px;
  margin-top: 0;
  margin-bottom: 0;
}

/* 动画样式 */
.appear-animation {
  opacity: 0;
  transform: translateY(20px);
  animation: appear 0.5s ease forwards;
  animation-delay: var(--animation-delay, 0s);
}

@keyframes appear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 媒体查询 */
@media (max-width: 1200px) {
  .ios19-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

@media (max-width: 768px) {
  .ios19-products-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}
</style> 